<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <!-- <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/> -->
<body>

    <div th:replace="common/Header :: header"></div>
    <div id="Content">
        <style type="text/css">
            .errormsg {
                color: red;
            }

            .okmsg {
                color: green;
            }
        </style>
        <script>
            function UserCheck() {
                let p = new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        let username = document.getElementById("username").value;
                        console.log(username.length);
                        if (username.length < 3 || username.length > 8) {
                            reject('该用户名不可用，用户名长度应在3-8位')
                        }
                        else {
                            resolve('该用户可用')
                        }
                    }, 100);
                });
                return p;
            }
            function PasswordCheck() {
                let p = new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        let password = document.getElementById("password").value;
                        // console.log(username.length);
                        if (password.length < 3 || password.length > 8) {
                            reject('该密码不可用，密码长度应在3-8位')
                        }
                        else {
                            resolve('该密码可用')
                        }
                    }, 100);
                });
                return p;
            }
            function PasswordCheck2() {
                let p = new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        let password = document.getElementById("password").value;
                        let password2 = document.getElementById("password2").value;
                        if (password != password2) {
                            reject('两次密码不正确')
                        }
                        else {
                            resolve('两次密码正确')
                        }
                    }, 100);
                });
                return p;
            }
            async function FormCheck() {
                let usernames=document.getElementById("isExistInfo");
                let passwords=document.getElementById("passwordAvailableInfo");
                let passwords2=document.getElementById("repeatpassword");
                //获取到触发按钮的选择器
                let origin=event.srcElement.id;
                console.log(origin);
                let flag=1;
                try {
                    
                    let usernamecheck = await UserCheck();
                    usernames.className='okmsg';
                    usernames.innerText=usernamecheck;
                    console.log(origin=='username');
                    if(origin=='username')
                    {
                        return ;
                    }
                    flag=2;
                    
                    let passwordcheck = await PasswordCheck();
                    passwords.className='okmsg';
                    passwords.innerText=passwordcheck;
                    if(origin=='password')
                    {
                        return ;
                    }
                    flag=3;
                    
                    let passwordcheck2 = await PasswordCheck2();
                    passwords2.className='okmsg';
                    passwords2.innerText=passwordcheck2;
                } catch (error) {
                    if(flag==1){
                    usernames.className='errormsg';
                    usernames.innerText=error; 
                    }
                    else if(flag==2)
                    {
                    passwords.className='errormsg';
                    passwords.innerText=error; 
                    }
                    else if(flag==3)
                    {passwords2.className='errormsg';
                    passwords2.innerText=error;}
                    
                }
            }
        </script>
        <div id="Catalog">

            <form action="/account/register" method="post">
                <h3>User Information</h3>
                <table>

                    <tr>
                        <td><label class="title" for="username">User ID:</label></td>
                        <td><input type="text" name="username" id="username" onblur="FormCheck()">
                            <span id="isExistInfo"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>New password:</td>
                        <td><input type="password" name="password" id="password" onblur="FormCheck()">
                            <span id="passwordAvailableInfo"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Repeat password:</td>
                        <td><input type="password" name="password2" id="password2" onblur="FormCheck()">
                            <span id="repeatpassword"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Birthday:</td>
                        <td><input type="date" name="birthday"></td>

                    </tr>
                    <tr>
                        <td colspan="2" align="center" th:text="${msg}">
                            <font color="red"></font><br>
                        </td>
                    </tr>

                </table>

                <div th:replace="account/ReplaceAccountFields2 :: replaceAccountFields2"></div>

                <input type="submit" name="newAccount" value="REGISTER">

                <!-- <script src="/js/UserCheck.js"></script> -->

            </form>
        </div>
    </div>
    <!-- <div th:replace="common/Footer :: footer"></div> -->

</body>

</html>